<template>
  <div>
    <!-- 过滤器用到的地方 -->
    <!--  在双花括号中 {{ message | capitalize }}-->
    <!-- 在 `v-bind` <div v-bind:id="rawId | formatId"></div>中 -->
    <el-card class="box-card">
    <!-- 上部表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="学科名称">
          <el-button 
            type="success" 
            icon="el-icon-edit" 
            style="float: right"
            @click="add"
            >新增学科</el-button>
          <el-input v-model="form.subjectName" style="width:30%"></el-input>
          <el-button style="margin-left:10px" @click="form.subjectName=''">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    <!-- 上部表单 -->

    <!-- 总数据条数 -->
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple">
          <i class="el-icon-info"></i>
          数据一共 {{total}} 条</div></el-col>
      </el-row>
    <!-- 总数据条数 -->
      
    <!-- 下部表格 -->
      <el-table
        :data="list"
        style="width: 100%; margin-top:15px;"
        >
        <el-table-column
          prop="id"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="学科名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="creatorID"
          label="创建者"
          width="80">
        </el-table-column>
        <el-table-column
          label="创建日期"
          width="180">
          <template slot-scope="scope">
            <!-- 使用过滤器 插槽作用域-->
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="前台是否显示"
          width="150">
          <template slot-scope="scope">
            <!-- 使用过滤器 插槽作用域-->
            <span>{{ scope.row.isFrontDisplay===1? '是':'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录">
        </el-table-column>
        <el-table-column
          prop="username"
          label="标签">
        </el-table-column>
        <el-table-column
          prop="totals"
          label="题目数量">
        </el-table-column>
        <!-- 通过一个作用域插槽  slot-scope="scope"  scope.row 代表表格绑定数据列表中的每一项
              当使用作用域插槽的时候 不再需要使用prop属性 
         -->
        <el-table-column
          fixed="right"
          label="操作"
          width="230">
          <template slot-scope="scope">
            <el-button  type="text" size="small" @click="goCategory(scope.row)">学科分类</el-button>
            <el-button  type="text" size="small" @click="goSubjectTag(scope.row)">学科标签</el-button>
            <el-button  type="text" size="small" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="delSubject(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 下部表格 -->

    <!-- 分页 -->
      <div style="text-align: right; margin-top:15px;">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          @current-change="curChange"
          :page-size="form.pagesize"
          @size-change="sizeChange"
          :current-page="form.page" 
          >
        </el-pagination>
      </div>
    <!-- 分页  -->
  </el-card>
     <!-- 添加/修改 的子组件 -->
    <SubjectsAdd ref="subjectAdd" :data="curSubject" @reRender="reRender"></SubjectsAdd>
  </div>
</template>

<script>
import { list, detail, simple, remove } from '@/api/hmmm/subjects'
import  SubjectsAdd  from '../components/subjects-add'

export default {
   data() {
    return {
      form: {
        page: 1,
        pagesize:10,
        subjectName: '',
      },
      curSubject: {},
      dialogVisible: false,
      visible: false,
      total: 0, 
      list: [],
    }
  },
  components:{
    SubjectsAdd
  },
  methods:{
    //子传父的通知父组件执行的事件
    reRender(){
      //将页码设置为第一页
      this.form.page = 1;
      //问题数据不能立马渲染
      // this.$nextTick(()=>{
        this.getList();
      // });
    },
    
    //获取页面数据
    async getList(){
      const data = this.form;
      const res = await list(data);
      //数据数量
      this.total = res.data.counts;
      //数据列表
      this.list = res.data.items;
    },
   
   //搜索功能
    search(){
      //3个参数都是非必须的
      this.form.page = null;
      this.getList();
    },
   
    //切换当前 page 的时候触发
    curChange (page){
      //当前页码值自动传过来的,在事件这里接收即可
      // console.log(page);
      //改变当前页之后,获取数据
      this.form.page = page;
      this.getList();
    },
    
    //改变 pagesize 时触发
    sizeChange(size){
      // console.log(val);
      this.form.pagesize = size;
      this.getList();
    },
    
    //删除学科功能
    delSubject(index,item){
      //点击删除,进行确定
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async() => {
        try{
          // 1. 前端进行页面渲染  出现了bug
          // this.list.splice(index,1);
          //2. 请求后端接口再次渲染, 删除是判断是不是只有一条数据,
          //   只有一条数据的话,请求数据的时候将页码值前移一页
          if(this.list.length === 1){
            this.form.page--;
          } 
          const res = await remove({
            id:item.id
          });
          //提示成功
          this.$message.success("删除成功");
          //进行请求数据渲染
          this.getList();
        }catch{
          this.$message.success("删除失败");
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
   
   //添加和修改可以合并为一个事件: 优化点
   //添加学科
    add(){
      //只需控制弹出,不需传值
      this.$refs.subjectAdd.open({});
      this.curSubject = {};
    },
    
    //修改学科
    edit(item){
      //弹出修改对话框 (通过控制子组件的事件)
      this.$refs.subjectAdd.open();
      //进行进行传值, 父传子props
      this.curSubject = item;
    },
   
   //跳转到分类
    goCategory(item){
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: item.id,
          name: item.subjectName
        }
      });
    },
   
   //跳转到学科标签
    goSubjectTag(item){
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: item.id,
          name: item.subjectName
        }
      });
    }
  },
    mounted(){
      this.getList();
    }
}
</script>

<style scoped lang='less'>
  .bg-purple {
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    background: #d3dce6;
    padding: 0 15px;
  }
  
</style>
